<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="com.boxin.ims.modules.wechat.entity.Product" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN" manifest="/misc/wei_cache_new.manifest">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<title>商品试用</title>
<link rel="stylesheet" type="text/css" href="${ctxStatic }/shopping/singlePage/productDetail/css/list.css" />
<link rel="stylesheet" type="text/css" href="${ctxStatic }/shopping/singlePage/productDetail/css/xiangq.css" />
<script src="${ctxStatic}/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function tips_pop(){
	  var MsgPop=document.getElementById("winpop");
	  var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
	   if (popH==0){
	   MsgPop.style.display="block";//显示隐藏的窗口
	  show=setInterval("changeH('up')",2);
	   }
	  else { 
	   hide=setInterval("changeH('down')",2);
	  }
	}
	function changeH(str) {
	 var MsgPop=document.getElementById("winpop");
	 var popH=parseInt(MsgPop.style.height);
	 if(str=="up"){
	  if (popH<=100){
	  MsgPop.style.height=(popH+50).toString()+"px";
	  }
	  else{  
	  clearInterval(show);
	  }
	 }
	 if(str=="down"){ 
	  if (popH>=4){  
	  MsgPop.style.height=(popH-50).toString()+"px";
	  }
	  else{ 
	  clearInterval(hide);   
	  MsgPop.style.display="none";  //隐藏DIV
	  }
	 }
	}
	window.onload=function(){//加载
	document.getElementById('winpop').style.height='0px';

	}



str2date = function(c_date) {
    if (!c_date)
        return "";
    var tempArray = c_date.split("-");
    if (tempArray.length != 3) {
        alert("你输入的日期格式不正确,正确的格式:2000-05-01 02:54:12");
        return 0;
    }
    var dateArr = c_date.split(" ");
    var date = null;
    if (dateArr.length == 2) {
        var yymmdd = dateArr[0].split("-");
        var hhmmss = dateArr[1].split(":");
        date = new Date(yymmdd[0], yymmdd[1] - 1, yymmdd[2], hhmmss[0], hhmmss[1], hhmmss[2]);
    } else {
        date = new Date(tempArray[0], tempArray[1] - 1, tempArray[2], 00, 00, 01);
    }
    return date;
};

var secondCounter = 0;

function change() {
	secondCounter ++;
	
	var nowDate = $("#nowDate").val();
	var myDate = str2date(nowDate);
	var end_time =$("#end_time").val();
	var the_end_time = str2date(end_time);
	
	myDate = Number(myDate) + secondCounter * 1000; //当前时间
	
	
	if((the_end_time-myDate)>0){
		var seconds = (the_end_time - myDate)/1000;
		var minutes = Math.floor(seconds/60);
		var hours = Math.floor(minutes/60);
		var days = Math.floor(hours/24);
		var day= days;
		var hour= hours % 24;
		var min= minutes % 60;
		var sec= seconds % 60;
		$("#time").html(day + "天" + hour + "时" + min + "分" + sec + "秒");
	}else{
		$(".daoji").html("该活动已结束！");
	}
	
}

$(function(){
var djs = setInterval("change()", 1000);

});


function openSubmit(){
	
	var nowDate = $("#nowDate").val();
	var myDate = str2date(nowDate);
	var end_time =$("#end_time").val();
	var the_end_time = str2date(end_time);
	
	myDate = Number(myDate) + secondCounter * 1000; //当前时间
	
	
	if((the_end_time-myDate)>0){
		tips_pop();
	}else{
		alert("活动已经结束了亲");
	}
}

function submitTry(){
	
	var nowDate = $("#nowDate").val();
	var myDate = str2date(nowDate);
	var end_time =$("#end_time").val();
	var the_end_time = str2date(end_time);
	
	myDate = Number(myDate) + secondCounter * 1000; //当前时间
	
	if((the_end_time-myDate)>0){
		$.get("${ctxFront}/shopping/product/addTryMember?pid=${product.id}&uid=${uid}&wechatId=${wechatId}", function(data){
			  if(data==="succeed"){
					alert("提交成功!");
			  }
			  if(data==="fail"){
				  alert("您已经提交过了!");
			  }
		});
	}else{
		alert("活动已经结束了亲");
	}
	
	
	
	
}
</script>
</head>
<body style="background:#fff;"  >

<div class="w640">
  <div class="inner"  style="padding:0px;" >
     <img src="${ctxUser }/product/${product.pic}"   style="padding:0px;width:100%;" >
     <div class="daoji"   >倒计时：<span id="time" >0天</span></div>
  </div>  
<div class="buy_area">
    <div class="fn_wrap">
        <h1 class="fn">${product.name }</h1>
    </div>

    <div class="price_wrap">
        <span class="tit">免费使用</span>
        <span class="price" style="margin-right:0px;" >${product.countByTry }</span> <span class="tit">份</span>
        <span class="col_right" >
            <span class="sale_num"><c:out value="${product.numberByTry }" default="0"/>人申请</span>
            <del class="old_price" style="margin-left:10px;"><em>¥${product.price/100 }</em></del><span class="sale_num">元</span>
        </span>
    </div>
	
	
	<!-- 
		    <div class="address_wrap"  onclick="tips_pop()">
		        <div class="tit">送至：</div>
		        <div class="promote_tag">
		            <div class="addr"><span>河北</span></div>
		            <div class="time"><span>有货，</span><span>下单后立即发货</span></div>
		        </div>
		    </div>
	
	 -->

    <div class="xiangq">商品详情</div>
           <div class="xcontent">  ${product.detail }</div>    
</div>

</div>
<div style="height:56px;"></div>
<div class="btn_wrap btn_wrap_fixed">
    <div class="btn_col">
        <a class="btn_sy" href="javascript:submitTry();">免费试用</a>
    </div>
</div>

</body>
</html>

<!--<div id="silu">
<button onclick="tips_pop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>-->
<style>
.inputstyle {
	width:265px;
	position:relative;
	top:2px;
	left:2px;

	line-height:18px;
	border:none;
	background:none;
	color:#999;border:1px solid #666;border-radius:3px;
	font-family:"微软雅黑";
	font-size:14px;
	ime-mode:disabled;
}
</style>
<input type="hidden"  id="end_time"  value="<fmt:formatDate value="${product.endTime }" type="both"/>"  >  
<input type="hidden"  id="nowDate"  value="${nowDate}"  >  
<div id="winpop" >
 <div class="title">请确认您的信息<span class="close"     onclick="tips_pop()">X</span></div>
 <div class="con" >
 <form id="loginForm"   action="${ctxMember}/login" method="post">
	        <div class="login_form">
	       
	            <div class="uinArea">
	               姓名: <input type="text" id="username" name="username" class=" inputstyle" value="${member.name}" >
	            </div>
	            <div class="uinArea">
	               手机:  <input type="text" id="mobile" name="mobile" class="inputstyle" />
	            </div>
	            <div class="uinArea" style="clear:both;margin-left:80px;">
	               <div class="btn_wrap">
	                 <input name="" class="btn btn_cart" onclick="submitTry()" value="申   请"  type="button"  style="margin-bottom:10px;border:none"  />
	               </div>
	            </div>     
	        </div>              
	   </form>
</div>
</div>